import React, { useEffect, useMemo, useState } from "react";
import PropTypes from "prop-types";
import { PullToRefresh, List, Image, InfiniteScroll } from 'antd-mobile';
import qs from 'qs'
import { useNavigate } from "react-router-dom";

import './NewsList.less'

const NewsList = function NewsList(props) {
    let navigate = useNavigate()
    let { newsListtData, onUpdate, hasMoreList } = props;
    const [hasMore, setHasMore] = useState(hasMoreList)

    useMemo(() => {
        setHasMore(hasMoreList)
    }, [newsListtData, hasMoreList])

    function loadMore() {    // 滚动到底部自己调用
        // setHasMore(false)
        return new Promise(async (res) => {
            await props.onUpdate({ isAdd: true })
            res()
        })
    }
    async function refreshNewsList() {
        return new Promise(async (res) => {
            await props.onUpdate({ isRefresh: true })
            res()
        })
    }

    return <div className="news-list-box" style={{ height: '670px' }}>
        <PullToRefresh
            onRefresh={refreshNewsList}
        >
            <List style={{}}>
                {
                    newsListtData.map((item, index) => {
                        const { id, cover, description, title, rate } = item;
                        // 此处默认偶数去电影详情页 写死
                        // 此处默认奇数去书本详情页 写死
                        return (<List.Item
                            key={id}
                            onClick={() => navigate({
                                pathname: `/detail/${id}`,
                                search: qs.stringify({ url: index % 2 == 0 ? 'moveDetailUrl' : 'bookDetailUrl' }),
                            })}
                            extra={
                                <Image
                                    src={cover}
                                    style={{ borderRadius: 5 }}
                                    fit='fill'
                                    width={50}
                                    height={50}
                                />
                            }
                            description={description}
                        >
                            <div className="title">影片名:{title}</div>
                            <div className="hint">评分:{rate}</div>
                        </List.Item>)
                    })
                }
            </List>
        </PullToRefresh>
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={100} />

    </div>
}


export default NewsList;